<template>
    <div v-loading="Data.loading" class="pub-main">
        <Header v-model="Data.activeName" :before-leave="tabBefore" />
        <div v-show="Data.activeName == 1">
            <BasicInfo ref="BasicInfoRef" />
            <Card title="价格和库存">
                <el-form label-width="96.5px">
                    <el-form-item label="商品规格" prop="specType" class="mt18">
                        <el-radio-group :disabled="Data.type == 'edit'" v-model="baseForm.specType">
                            <el-radio :label="1">单规格</el-radio>
                            <el-radio :label="2">多规格</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div v-show="baseForm.specType === 1">
                    <SkuForm ref="SkuFormRef" :hasActivityMsg="hasActivityMsg" :isActivity="Data.isActivity" />
                </div>
                <div class="sku-content" v-if="baseForm.specType === 2">
                    <div class="sku-item" v-for="(item, index) in Data.skuFormList" :key="index">
                        <div class="sku-item-box">
                            <div>
                                <el-form ref="skuRuleRef" :model="item" :rules="skuRule" @submit.prevent>
                                    <el-form-item label="规格名" prop="skuName">
                                        <div class="flex">
                                            <el-select
                                                v-model="item.skuName"
                                                @mouseenter.self="handleMouseover"
                                                @mouseleave.self="handleMouseleave"
                                                :disabled="!!hasActivityMsg"
                                                @change="selectSkuName(item.skuName, index)"
                                                filterable
                                                allow-create
                                                default-first-option
                                                :reserve-keyword="false"
                                                v-input-length="10"
                                                placeholder="请选择">
                                                <el-option
                                                    v-for="element in filterSkuNameDisabled"
                                                    :key="element.id"
                                                    value-key="id"
                                                    :label="String(element.attributeName)"
                                                    :value="element.attributeName" />
                                            </el-select>
                                            &emsp;
                                            <el-checkbox
                                                v-if="index === 0"
                                                @change="val => skuChooseImgChangeHandler(val, item)"
                                                v-model="addSpecImg"
                                                label="添加规格图片" />
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="规格值" prop="list">
                                        <el-form
                                            ref="skuListValueRef"
                                            v-for="(el, idx) in item.list"
                                            :key="`el_${el.code}`"
                                            :rules="skuValueRules"
                                            :model="el"
                                            label-width="0px"
                                            class="sku-value-item">
                                            <el-form-item label="" style="margin-bottom: 5px" prop="skuValue">
                                                <el-select
                                                    v-model="el.skuValue"
                                                    @mouseenter.self="handleMouseover"
                                                    @mouseleave.self="handleMouseleave"
                                                    :disabled="!!hasActivityMsg"
                                                    @change="val => skuSpeValueChange(val, item)"
                                                    style="width: 160px"
                                                    filterable
                                                    allow-create
                                                    default-first-option
                                                    v-input-length="50"
                                                    :reserve-keyword="false"
                                                    :placeholder="`请选择规格值${idx + 1}`">
                                                    <el-option
                                                        v-for="element in getSpecValueList(item.skuName)"
                                                        :key="element.id"
                                                        :label="String(element.attrName)"
                                                        :value="element.attrName" />
                                                </el-select>
                                                <div
                                                    @click="deteleSkuValue(index, idx)"
                                                    v-if="item.list.length > 1 && !hasActivityMsg"
                                                    class="sku-value-item-img-del"
                                                    alt="">
                                                    <el-icon><Close /></el-icon>
                                                </div>
                                            </el-form-item>
                                            <el-form-item label="" v-if="addSpecImg && index === 0" prop="imgUrl">
                                                <el-upload
                                                    :on-success="
                                                        (res, file) => uploadSKUImgSuccess(index, idx, res, file)
                                                    "
                                                    :show-file-list="false"
                                                    class="sku-value-upload"
                                                    :action="actionUrl"
                                                    :headers="headers"
                                                    :before-upload="beforeImgUpload"
                                                    drag>
                                                    <div class="sku-value-box" v-if="el.imgUrl">
                                                        <img class="sku-value-img" :src="el.imgUrl" />
                                                        <div class="sku-value-box-hover">
                                                            <img
                                                                @click.stop="delSkuImg(index, idx)"
                                                                class="del-img"
                                                                src="@/assets/imgs/mall/commodity/icon_02.png"
                                                                alt="" />
                                                        </div>
                                                    </div>
                                                    <div class="sku-value-no" v-else>
                                                        <img src="@/assets/imgs/mall/commodity/icon_03.png" alt="" />
                                                        <div>规格图片{{ idx + 1 }}</div>
                                                    </div>
                                                </el-upload>
                                            </el-form-item>
                                        </el-form>

                                        <div
                                            class="sku-value-update"
                                            v-if="item.list.length < 50 && !hasActivityMsg"
                                            @click="addSkuValue(index, item.skuName)">
                                            <img
                                                class="sku-value-update-img"
                                                src="@/assets/imgs/mall/commodity/icon_01.png"
                                                alt="" />
                                            添加规格值
                                        </div>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="delete-sku" v-if="index != 0">
                                <img @click="deleteSkuForm(index)" src="@/assets/imgs/logo/del.png" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="sku-button">
                        <div class="sku-button-btn">
                            <div class="btn" @mouseenter.self="handleMouseover" @mouseleave.self="handleMouseleave">
                                <el-button
                                    :disabled="Data.skuFormList.length > 2 || !!hasActivityMsg"
                                    type="primary"
                                    @click="addSkuForm">
                                    添加项目规格
                                </el-button>
                            </div>
                            <div class="sku-button-tips">&ensp;最多支持3组规格项目</div>
                            <!-- <div @click="sortSku" class="sku-button-btn-sort">规格项目排序</div> -->
                        </div>
                    </div>
                    <el-drawer v-model="Data.skuSortShow" title="规格项目排序" direction="rtl">
                        <transition-group class="sku-sort-popup" tag="div" @dragover="dragoverSku($event)">
                            <div
                                class="sku-sort-item"
                                v-for="(item, index) in Data.skuSortList"
                                :key="`sku_sort_${index}`"
                                :draggable="true"
                                @dragstart="dragstartSku(index, item)"
                                @dragenter="dragenterSku(index, $event)"
                                @dragend="dragendSku(item, $event)"
                                @dragover="dragoverSku($event)">
                                {{ item.title }}
                            </div>
                        </transition-group>
                        <template #footer>
                            <div style="flex: auto">
                                <el-button @click="Data.skuSortShow = false">返回</el-button>
                                <el-button type="primary" @click="confirmSkuSort">确认</el-button>
                            </div>
                        </template>
                    </el-drawer>
                </div>

                <div class="sku-price" v-if="baseForm.specType === 2">
                    <div class="sku-price-table">
                        <div class="title">价格与库存</div>
                        <div class="tabel-list">
                            <el-form ref="skuTableRuleRef" :model="Data" @submit.prevent>
                                <el-table
                                    v-if="Data.tableShow"
                                    border
                                    :data="Data.tableData"
                                    :span-method="objectSpanMethod"
                                    stripe>
                                    <el-table-column
                                        v-for="(item, index) in Data.skuFormList"
                                        :key="`sku_price${item.id}`"
                                        :prop="`skuValue${index}`"
                                        :label="item.skuName" />
                                    <el-table-column v-if="addSpecImg" label="商品规格图" width="96" prop="imgUrl">
                                        <template #default="scope">
                                            <el-upload
                                                :on-success="(res, file) => uploadSkuSpeImgSuccess(scope.row, file)"
                                                :show-file-list="false"
                                                class="sku-value-upload"
                                                :action="actionUrl"
                                                :headers="headers"
                                                :before-upload="beforeImgUpload"
                                                drag>
                                                <div class="sku-value-box" v-if="scope.row.imgUrl">
                                                    <img class="sku-value-img" :src="scope.row.imgUrl" />
                                                    <div class="sku-value-box-hover">
                                                        <div
                                                            @click.stop="delSkuSpeImg(scope.row, scope.$index)"
                                                            class="sku-value-box-del"
                                                            alt="">
                                                            <el-icon><Close /></el-icon>
                                                        </div>
                                                        <div class="sku-value-box-change" @click="changeSkuImgHandler">
                                                            替换
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="sku-value-no" v-else>
                                                    <img src="@/assets/imgs/mall/commodity/icon_03.png" alt="" />
                                                    <div>规格图片</div>
                                                </div>
                                            </el-upload>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="外部SKU编码" width="240" prop="erpSkuId">
                                        <template #header>
                                            <div class="sku-erp-header">
                                                <span>外部SKU编码</span>
                                                <el-tooltip
                                                    effect="dark"
                                                    placement="top"
                                                    content="用于商家ERP、OMS等外部系统对接">
                                                    <img style="" src="@/assets/imgs/logo/question.png" alt="" />
                                                </el-tooltip>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <el-form-item
                                                @mouseenter="handleMouseover"
                                                @mouseleave="handleMouseleave"
                                                :prop="`tableData.${$index}.erpSkuId`"
                                                :rules="skuTableRules.erpSkuId">
                                                <input
                                                    v-model.trim.lazy="row.erpSkuId"
                                                    class="el-textarea__inner el-textarea__inner_custom"
                                                    @blur="handleCheckField($event, `tableData.${$index}.erpSkuId`)"
                                                    maxlength="50"
                                                    placeholder="非必填" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="skuPrice" label="价格" width="240">
                                        <template #default="scope">
                                            <el-form-item
                                                @mouseenter="handleMouseover"
                                                @mouseleave="handleMouseleave"
                                                :prop="'tableData.' + scope.$index + '.skuPrice'"
                                                :rules="skuTableRules.skuPrice">
                                                <input
                                                    v-model.trim.lazy="scope.row.skuPrice"
                                                    class="el-textarea__inner el-textarea__inner_custom"
                                                    @blur="
                                                        handleCheckField(
                                                            $event,
                                                            'tableData.' + scope.$index + '.skuPrice'
                                                        )
                                                    "
                                                    :disabled="!!hasActivityMsg"
                                                    maxlength="10"
                                                    placeholder="输入价格" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="skuStock" label="库存" width="240">
                                        <template #default="scope">
                                            <el-form-item
                                                :prop="'tableData.' + scope.$index + '.skuStock'"
                                                :rules="skuTableRules.skuStock">
                                                <input
                                                    v-model.trim.lazy="scope.row.skuStock"
                                                    class="el-textarea__inner el-textarea__inner_custom"
                                                    @blur="
                                                        handleCheckField(
                                                            $event,
                                                            'tableData.' + scope.$index + '.skuStock'
                                                        )
                                                    "
                                                    maxlength="10"
                                                    :disabled="scope.row.isErp"
                                                    placeholder="输入库存" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>

                                    <template #append>
                                        <div class="batch-setting">
                                            <div>批量设置： &emsp; &ensp;</div>
                                            <div>
                                                价格&nbsp;
                                                <el-input-number
                                                    :controls="false"
                                                    @mouseenter.self="handleMouseover"
                                                    @mouseleave.self="handleMouseleave"
                                                    :disabled="!!hasActivityMsg"
                                                    v-model="baseForm.skuPrice"
                                                    placeholder="输入价格"
                                                    :precision="2"
                                                    :min="0.01"
                                                    :max="999999999" />
                                                &emsp;
                                            </div>
                                            <div>
                                                库存&nbsp;
                                                <el-input-number
                                                    :controls="false"
                                                    placeholder="输入库存"
                                                    v-model="baseForm.skuStock"
                                                    :precision="0"
                                                    :min="0"
                                                    :max="999999999" />
                                                &emsp;
                                            </div>
                                            <el-button type="primary" @click="clickBatch"> 保存 </el-button>
                                        </div>
                                    </template>
                                </el-table>
                            </el-form>
                        </div>
                    </div>
                </div>
            </Card>
            <Card title="运费信息">
                <FreightForm ref="FreightFormRef" />
            </Card>
            <Card title="其他信息">
                <OtherForm ref="OtherFormRef" />
            </Card>
            <div class="submit-button">
                <el-button @click="toList()">上一步</el-button>
                <el-button type="primary" @click="confirmStep(2)">下一步</el-button>
            </div>
        </div>
        <div v-show="Data.activeName == 2" class="update-goods">
            <div class="update-goods_editor">
                <TEditor v-model="baseForm.desc" @getContent="getContent" />
            </div>
            <div class="submit-button">
                <el-button @click="Data.activeName = 1">上一步</el-button>
                <el-button type="primary" @click="saveGoods(2)">放入仓库</el-button>
                <el-button type="primary" @click="saveGoods(1)">立即上架</el-button>
            </div>
        </div>
        <el-tooltip
            popper-class="custom-tooltip-class"
            v-model:visible="tooltipVisible"
            :content="hasActivityMsg"
            placement="top"
            trigger="click"
            virtual-triggering
            :virtual-ref="triggerRef" />
    </div>
</template>
<script setup>
import Header from './header.vue';
import BasicInfo from './basicInfo.vue';
import SkuForm from './skuForm.vue';
import FreightForm from './freightForm.vue';
import OtherForm from './otherForm.vue';
import Card from './card.vue';
import { ref, computed, reactive, inject, onMounted, onUnmounted, render, nextTick } from 'vue';
import { setLayout, resetLayout } from '@/hooks/layout';
import { useRouter, useRoute } from 'vue-router';
import storage from '@/commons/storage';
import request from '@/request';
import { carouselEmits, ElMessage } from 'element-plus';
import {
    isPositiveInt,
    isAmount,
    floatMultiply,
    floatDivide,
    inputFormatter,
    throttle,
    isNotEmpty
} from '@/commons/utils';
import TEditor from '@/components/TEditor.vue';
import constants from '@/commons/constants';

const router = useRouter();
const route = useRoute();

const confirm = inject('confirm');

const contents = ref('');
const formState = reactive({ contents: '' });
const getContent = v => {
    formState.contents = v;
};

const tempUrl = constants.FILE_UPLOAD_URL;

const actionUrl = ref(tempUrl);

const headers = reactive({
    'ZW-PLATFORM-TOKEN': storage.get('ZW-TOKEN') || '',
    'ZW-TENANT-ID': storage.get('ZW-TENANT-ID') || ''
});
const tabBefore = v => {
    if (v != Data.activeName) return false;
    Data.activeName = v.toString();
};
const skuRuleRef = ref();
const skuListValueRef = ref();
const skuTableRuleRef = ref();
const validateAmount = (rule, value, callback) => {
    if (value == '' || value == undefined) {
        callback();
    } else if (isAmount(value) && value > 0) {
        callback();
    } else {
        callback(new Error('请输入正确的价格，最多保留2位小数!'));
    }
};

const validatePositiveInt = (rule, value, callback) => {
    if (value == '' || value == undefined) {
        callback();
    } else if (isPositiveInt(value)) {
        callback();
    } else {
        callback(new Error('请输入正确的库存!'));
    }
};
const validateSkuValue = (rule, value, callback) => {
    const valueList = Array.from(value, x => x.skuValue);
    if (new Set(valueList).size !== valueList.length) {
        callback(new Error('含有重复的规格值!'));
    }
    callback();
};

const skuRule = reactive({
    skuName: [{ required: true, message: '请选择规格名', trigger: 'change' }],
    list: [
        { required: true, message: '请输入规格值', trigger: 'blur' },
        { validator: validateSkuValue, trigger: 'blur' }
    ]
});

const skuValueRules = reactive({
    skuValue: [{ required: true, message: '请选择规格值', trigger: 'change' }]
    // imgUrl: [{ required: true, message: '请上传规格图片', trigger: 'blur' }]
});

const skuTableRules = reactive({
    skuPrice: [
        { required: true, message: '请输入价格', trigger: 'blur' },
        { validator: validateAmount, trigger: 'blur' }
    ],
    skuStock: [
        { required: true, message: '请输入库存', trigger: 'blur' },
        { validator: validatePositiveInt, trigger: 'blur' }
    ],
    erpSkuId: [
        // 不允许重复
        {
            validator: (rule, value, callback) => {
                if (['', undefined, null].includes(value)) {
                    callback();
                }
                const erpSkuIdLenght = Array.from(Data.tableData, x => x.erpSkuId).filter(
                    item => item === value
                ).length;
                if (erpSkuIdLenght > 1) {
                    callback(new Error('外部SKU编码不可重复!'));
                }
                callback();
            },
            trigger: 'blur'
        }
    ]
});

let addSpecImg = ref(false);
const Data = reactive({
    loading: route.query.type ? true : false,
    type: route.query.type,
    shopId: storage.get('ZW-SHOPID'),
    activeName: '1',
    categoryList: [], // 分类数据
    specificationList: [], // 规格名数据
    freightList: [], // 运费模板
    tableData: [], // 规格明细
    skuFormList: [
        // 项目规则数据
        {
            skuName: ' ',
            skuAttrSort: 1,
            list: [
                {
                    skuValue: ' ',
                    imgUrl: ''
                }
            ],
            isDefault: '1'
        }
    ],
    skuSortShow: false,
    skuSortOldIndex: '',
    skuSortIndex: '',
    skuSortList: [],
    skuInfoTable: [],
    onSale: '',
    isActivity: false, // 是否是活动商品
    erpSkuId: '',
    erpSpuId: '',
    isErpArr: [],
    /* 解决添加项目规格时 input 输入框 placeholder 和 校验提示信息错位 及列宽度无限增加  */
    tableShow: true
});

// 基础信息表单数据
const baseForm = reactive({
    id: '',
    goodsId: '',
    goodsName: '',
    erpSpuId: '',
    erpSkuId: '',
    delivery: false,
    category: [],
    specType: 1,
    singlePrice: null,
    singleStock: null,
    desc: ''
});

// 获取商品编号
baseForm.goodsId = route.query.goodsId;
baseForm.id = route.query.id;

let hasActivityMsg = ref();
if (route.query.goodsId) {
    // 获取商品参加活动情况
    request('checkActivityGoodsServ', { goodsId: route.query.id }).then(res => {
        if (res && res.code !== 0) {
            hasActivityMsg.value = res.msg + ', 活动结束后才能修改规格';
            Data.isActivity = true;
        } else {
            hasActivityMsg.value = '';
        }
    });
}
let tooltipVisible = ref(false);
const position = ref({
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
});
const handleMouseover = e => {
    if (!hasActivityMsg.value) {
        return;
    }
    tooltipVisible.value = true;
    position.value = DOMRect.fromRect({
        width: 0,
        height: 0,
        x: e.clientX,
        y: e.clientY
    });
};
const handleMouseleave = el => {
    if (!hasActivityMsg.value) {
        return;
    }
    tooltipVisible.value = false;
    position.value = {
        top: 0,
        left: 0,
        bottom: 0,
        right: 0
    };
};
const handleCheckField = (el, prop) => {
    skuTableRuleRef.value.validateField(prop);
};
const triggerRef = ref({
    getBoundingClientRect() {
        return position.value;
    }
});

// // 获取分类列表
// const getCategoryList = () => {
//     request('queryCategoryListServ', { shopId: Data.shopId }).then(res => {
//         let list = res.data || [];
//         list.forEach(el => {
//             if (!el.children) {
//                 el.disabled = true;
//             }
//         });
//         Data.categoryList = list;
//     });
// };
// getCategoryList();

// 获取规格名
const getSpecificationList = () => {
    let params = {
        page: 1,
        perPage: 99
    };
    request('querySkuSpecList', params).then(res => {
        Data.specificationList = res.data.list || [];
    });
};
getSpecificationList();

// 过滤已经有的规格名
const filterSkuNameDisabled = computed(() => {
    const allSkuName = Array.from(Data.skuFormList, x => x.skuName);
    return Data.specificationList.filter(x => !allSkuName.includes(x.attributeName));
});

const initSkuInfo = list => {
    let ary = [];
    list.map(el => {
        el.skuExt &&
            el.skuExt.forEach(e => {
                if (ary.some(el => el.skuName == e.specAttr.specAttrKeyName)) {
                    let index = ary.findIndex(i => i.skuName == e.specAttr.specAttrKeyName);
                    if (ary[index].list.every(j => j.skuValue != e.specAttr.attributeValue)) {
                        ary[index].list.push({
                            skuAttrSort: e.skuAttrSort,
                            skuValue: e.specAttr.attributeValue,
                            attributeName: e.specAttr.specAttrKeyName,
                            attributeId: e.specAttrKeyId,
                            specAttrValueId: e.specAttrValueId,
                            skuAttrId: e.skuAttrId
                        });
                    }
                } else {
                    ary.push({
                        skuName: e.specAttr.specAttrKeyName,
                        skuAttrSort: e.skuAttrSort,
                        list: [
                            {
                                skuAttrSort: e.skuAttrSort,
                                skuValue: e.specAttr.attributeValue,
                                // imgUrl: e.specAttr.attributeImg,
                                attributeName: e.specAttr.specAttrKeyName,
                                attributeId: e.specAttrKeyId,
                                specAttrValueId: e.specAttrValueId,
                                skuAttrId: e.skuAttrId
                            }
                        ]
                    });
                }
            });
    });
    ary.map((el, index) => {
        el.title = `项目规格${index + 1}`;
        el.list.map(e => {
            e.skuIdList = [];
            Data.skuInfoTable.map(i => {
                if (i.skuExt.some(j => j.specAttr.attributeValue == e.skuValue)) {
                    e.skuIdList.push(i.id);
                }
            });
        });
    });
    ary.sort((a, b) => a.skuAttrSort - b.skuAttrSort);
    return ary;
};

// 确认项目规格排序
const confirmSkuSort = () => {
    Data.skuSortShow = false;
    Data.skuFormList = JSON.parse(JSON.stringify(Data.skuSortList));
    Data.skuFormList.map((el, index) => {
        el.skuAttrSort = index + 1;
        el.list.map(i => {
            i.skuAttrSort = index + 1;
        });
    });
    saveSkuInfo();
};

const skusValidate = () => {
    return new Promise((resolve, reject) => {
        validate(async () => {
            const nameList = Array.from(Data.skuFormList, x => x.skuName);
            if (new Set(nameList).size !== Data.skuFormList.length) {
                ElMessage.error('含有重复的规格名');
                reject();
                return false;
            }
            if (addSpecImg.value && !Data.tableData.find(x => x.imgUrl)) {
                ElMessage.error('请至少上传一张规格图片');
                reject();
                return false;
            }
            resolve();
        });
    });
};
// erp 商品 spuId 和 skuId 必须同时填写和不填写
const onErpValidate = async () => {
    let flag = false;
    let erpSpuId = !!BasicInfoRef.value.formData.erpSpuId;
    let erpSkuId = !!SkuFormRef.value.formData.erpSkuId;
    if (baseForm.specType == 2) erpSkuId = !!Data.tableData.filter(item => !!item.erpSkuId).length;
    flag = [erpSpuId, erpSkuId].filter(Boolean).length === 1;
    if (flag) {
        let message = erpSpuId ? '确定不填写外部sku编码？' : '确定不填写外部spu编码？';
        flag = await confirm(message);
    }
    return new Promise(resolve => resolve());
};

const BasicInfoRef = ref(null);
const SkuFormRef = ref(null);
const FreightFormRef = ref(null);
const OtherFormRef = ref(null);
const confirmStep = async () => {
    await BasicInfoRef.value.validate();
    if (baseForm.specType === 1) {
        await SkuFormRef.value.validate();
    }
    if (baseForm.specType === 2) {
        await skusValidate();
    }
    await FreightFormRef.value.validate();
    await onErpValidate();
    Data.activeName = 2;
};

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (Data.skuFormList[columnIndex + 1]) {
        const row = calcRow(columnIndex);
        if (rowIndex % row === 0) {
            return {
                rowspan: row,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    } else {
        return {
            rowspan: 1,
            colspan: 1
        };
    }
};
const calcRow = columnIndex => {
    let row = Data.skuFormList[columnIndex + 1].list.length;
    if (Data.skuFormList[columnIndex + 2]) {
        row *= Data.skuFormList[columnIndex + 2].list.length;
    }
    return row;
};

const recursive = (pre, list) => {
    if (pre.length) {
        return pre.map(item => {
            if (item['list'] && item['list'].length) {
                item['list'] = item['list'].map(el => {
                    el['list'] = list;
                    return el;
                });
            } else {
                item['list'] = list;
            }
            return item;
        });
    } else {
        return list;
    }
};
/**
 * 规格数量校验
 */
// const skuCountValidate = () => {
//     const oneSkuCount = Data.skuFormList[0]?.list?.length || 1;
//     const twoSkuCount = Data.skuFormList[1]?.list?.length || 1;
//     const threeSkuCount = Data.skuFormList[2]?.list?.length || 1;
//     if (Data.skuFormList.length === 1) {
//         return oneSkuCount <= 600;
//     } else if (Data.skuFormList.length === 2) {
//         return [(oneSkuCount + 1) * twoSkuCount <= 600, oneSkuCount * (twoSkuCount + 1) <= 600].every(item => item);
//     } else if (Data.skuFormList.length === 3) {
//         return [
//             (oneSkuCount + 1) * twoSkuCount * threeSkuCount <= 600,
//             oneSkuCount * (twoSkuCount + 1) * threeSkuCount <= 600,
//             oneSkuCount * twoSkuCount * (threeSkuCount + 1) <= 600
//         ].every(item => item);
//     }
// };

const skuCountValidate = index => {
    const skuFormList = Data.skuFormList;
    if (skuFormList.length === 1) {
        return (skuFormList[0]?.list?.length || 1) <= 600;
    }
    const length = skuFormList.reduce((acc, cur, curIndex) => {
        let num;
        num = acc * (curIndex === index ? cur.list.length + 1 : cur.list.length);
        return num;
    }, 1);
    return length <= 600;
};

// 添加规格值
const addSkuValue = (index, skuName) => {
    if (skuCountValidate(index)) {
        Data.skuFormList[index].list.push({
            attributeName: skuName,
            skuAttrSort: index + 1
        });
    } else {
        ElMessage.error('一个商品最多支持600种组合规格');
    }
};
// 删除规格值
const deteleSkuValue = (index, idx) => {
    Data.skuFormList[index].list.splice(idx, 1);
    setTimeout(() => {
        saveSkuInfo();
    });
};
// 添加规格项目
const addSkuForm = async () => {
    let obj = {
        title: `规格项目${Data.skuFormList.length + 1}`,
        skuName: '',
        skuAttrSort: Data.skuFormList.length + 1,
        list: [
            {
                skuAttrSort: Data.skuFormList.length + 1
            }
        ]
    };
    Data.tableShow = false;
    Data.skuFormList.push(obj);
    await nextTick();
    Data.tableShow = true;
};
// 删除规格项目
const deleteSkuForm = index => {
    if (index == 0) return;
    Data.skuFormList.splice(index, 1);
    reRangeSkuForm();
    setTimeout(() => {
        saveSkuInfo();
    });
};

const reRangeSkuForm = () => {
    Data.skuFormList.forEach((x, idx) => {
        (x.title = `规格项目${idx + 1}`),
            (x.skuAttrSort = idx + 1),
            x.list.forEach(e => {
                e.skuAttrSort = idx + 1;
            });
    });
};

const selectSkuName = (val, index) => {
    let info = Data.skuFormList[index] || {};
    let list = [];
    info.list.forEach(x => {
        list.push({
            attributeName: val,
            skuAttrSort: x.skuAttrSort,
            skuValue: x.skuValue
        });
    });
    info.list = list;
    setTimeout(() => {
        saveSkuInfo();
    });
};

const skuSpeValueChange = (val, item) => {
    setTimeout(() => {
        saveSkuInfo();
    });
};

const skuChooseImgChangeHandler = async (val, item) => {
    if (!val) {
        item.list.forEach(x => {
            x.imgUrl = '';
        });
        Data.tableData.forEach(x => {
            x.imgUrl = '';
        });
    }
    Data.tableShow = false;
    await nextTick();
    Data.tableShow = true;
};

const delSkuSpeImg = (row, idx) => {
    row.imgUrl = '';
    const skuName = row.skuValue0;
    const skuObj = Data.skuFormList[0].list.find(x => x.skuValue === skuName);
    skuObj.imgUrl = '';
};

const uploadSkuSpeImgSuccess = (row, uploadFile) => {
    row.imgUrl = uploadFile.response.data.url;
    const skuName = row.skuValue0;
    const skuObj = Data.skuFormList[0].list.find(x => x.skuValue === skuName);
    skuObj.imgUrl = '';
};

// 规格项目排序
const sortSku = () => {
    Data.skuSortShow = true;
    Data.skuSortList = JSON.parse(JSON.stringify(Data.skuFormList));
};

// 批量处理规格图
const saveImgInfo = (skuValue, url) => {
    Data.tableData.forEach(x => {
        if (x.skuValue0 === skuValue) {
            x.imgUrl = url;
        }
    });
};

// 保存
const saveSkuInfo = () => {
    // 校验
    skuListValidate(async () => {
        let skuList = JSON.parse(JSON.stringify(Data.skuFormList));
        skuList.reduce((pre, cur) => {
            let { list } = cur;
            return recursive(pre, list);
        }, []);
        Data.tableData = getTableData(skuList[0]?.list);
        if (Data.type == 'edit') {
            Data.tableData = Data.tableData.map(item => {
                const id = getSkuId(item);
                const findVal = Data.skuInfoTable.find(cItem => cItem.id === id);
                if (findVal) {
                    return {
                        ...item,
                        skuPrice: findVal.skuPrice ? findVal.skuPrice / 100 : '',
                        skuStock: findVal.skuStock,
                        imgUrl: findVal.skuImg,
                        erpSkuId: findVal.erpSkuId,
                        isErp: findVal.isErp
                    };
                }
                return item;
            });
            // Data.skuInfoTable.map((el, index) => {
            //     if (el.skuImg) {
            //         addSpecImg.value = true;
            //     }
            // });
            addSpecImg.value = Data.skuInfoTable.some(item => item.skuImg);
        }
        Data.tableShow = false;
        await nextTick();
        Data.tableShow = true;
    });
};

const skuListValidate = callback => {
    let list = [];
    skuRuleRef?.value?.map(el => {
        let p = new Promise(function (resolve, reject) {
            el.validate(i => {
                if (i) {
                    resolve();
                } else {
                    reject();
                }
            });
        });
        list.push(p);
    });
    Promise.all(list)
        .then(() => {
            callback();
        })
        .catch(err => {});
};

const skuListValueRefValidate = callback => {
    let list = [];
    skuListValueRef?.value.map(el => {
        let p = new Promise(function (resolve, reject) {
            el.validate(i => {
                if (i) {
                    resolve();
                } else {
                    reject();
                }
            });
        });
        list.push(p);
    });
    Promise.all(list)
        .then(() => {
            callback();
        })
        .catch(err => {});
};

// 校验录入校验
const validate = callback => {
    skuListValidate(() => {
        skuListValueRefValidate(() => {
            if (!Data.tableData.length) {
                ElMessage.error('请点击保存项目规格');
                return false;
            } else {
                skuTableRuleRef.value.validate(tableR => {
                    tableR && callback();
                });
            }
        });
    });
};

// 添加商品
const addSaveGood = onSale => {
    let materialSrc = [];
    let goodsCategoryId = [];
    let skuInfo = [];
    let skuStock = [];
    let skuPrice = [];
    let skuImg = [];
    let erpSkuIds = [];

    materialSrc = BasicInfoRef.value.formData.materialSrc.map((el, index) => {
        return {
            materialSrc: el.url,
            sort: index + 1,
            isCover: el.isCover ? 1 : 0
        };
    });
    materialSrc.pop();
    // Data.categoryList.map(el => {
    //     el.children &&
    //         el.children.map(e => {
    //             if (BasicInfoRef.value.formData.category.some(i => i == e.id)) {
    //                 goodsCategoryId.push({
    //                     categoryParentId: el.id,
    //                     categorySonId: e.id
    //                 });
    //             }
    //         });
    // });
    if (baseForm.specType === 2) {
        Data.skuFormList.map((el, index) => {
            skuInfo.push([]);
            el.list.map((e, idx) => {
                skuInfo[index].push({
                    attributeId: getSpecificationId(el.skuName) || 0,
                    attributeName: el.skuName,
                    attributeValue: e.skuValue,
                    // thumb: Data.tableData[index].imgUrl,
                    skuSort: index + 1
                });
            });
        });
        Data.tableData.map(el => {
            skuStock.push(el.skuStock);
            skuPrice.push(floatMultiply(el.skuPrice, 100));
            skuImg.push(el.imgUrl);
            erpSkuIds.push(el.erpSkuId || '');
        });
    } else {
        skuInfo.push([
            {
                attributeId: 999,
                attributeValue: 0,
                thumb: '',
                skuSort: 1
            }
        ]);
        skuStock.push(SkuFormRef.value.formData.skuStock);
        skuPrice.push(floatMultiply(SkuFormRef.value.formData.skuPrice, 100));
        erpSkuIds.push(SkuFormRef.value.formData.erpSkuId);
    }

    let params = {
        shopId: Data.shopId,
        specType: baseForm.specType,
        materialSrc: materialSrc,
        goodsName: BasicInfoRef.value.formData.goodsName,
        classId: BasicInfoRef.value.formData.classId,
        goodsCategoryId: BasicInfoRef.value.formData.goodsCategoryId,
        enable: '1',
        transportId: FreightFormRef.value.formData.transportId,
        isShow: OtherFormRef.value.formData.isShow,
        goodsDescription: baseForm.desc,
        onSale: onSale,
        skuInfo: skuInfo,
        skuStock: skuStock,
        skuPrice: skuPrice,
        skuImg: skuImg,
        erpSpuId: BasicInfoRef.value.formData.erpSpuId,
        erpSkuIds: erpSkuIds
    };
    return params;
};

// 商品图片上传数据转换
const goodsPicHandle = () => {
    const imgList = BasicInfoRef.value.formData.materialSrc.map((el, index) => ({
        materialSrc: el.url,
        sort: index + 1,
        isCover: el.isCover ? 1 : 0
    }));
    imgList.pop();
    return imgList;
};
// 商品图片回显数据转换
const echoGoodsPicListHandle = list => {
    const imgList = list
        .sort((a, b) => a.sort - b.sort)
        .map((item, index) => {
            return {
                index: index,
                isCover: item.isCover == 1,
                url: item.materialSrc,
                class: 'draggable'
            };
        });
    imgList.push({ index: 9, url: '', class: 'upload' });
    return imgList;
};
const editSaveGood = type => {
    const materialSrc = goodsPicHandle();
    let goodsCategoryId = [];
    let categoryDeletedId = [];
    let materialSrcDeletedId = [];
    let specAttrValueDeletedIds = [];
    let skuDeletedIds = [];
    let skuInfo = [];
    let onSale = Data.onSale;
    let goodsId = baseForm.id;

    Data.detailMaterialSrc.map(el => {
        let index = materialSrc.findIndex(i => i.id == el.id);
        if (index > -1) {
            materialSrc[index].id = el.id;
        } else {
            materialSrcDeletedId.push(el.id);
        }
    });
    // Data.categoryList.map(el => {
    //     el.children &&
    //         el.children.map(e => {
    //             if (BasicInfoRef.value.formData.category.some(i => i == e.id)) {
    //                 goodsCategoryId.push({
    //                     categoryParentId: el.id,
    //                     categorySonId: e.id
    //                 });
    //             }
    //         });
    // });
    goodsCategoryId = BasicInfoRef.value.formData.goodsCategoryId;
    Data.detailCategoryList.map(el => {
        let index = goodsCategoryId.findIndex(i => i.categorySonId == el.categorySonId);
        if (index > -1) {
            goodsCategoryId[index].id = el.id;
        } else {
            categoryDeletedId.push(el.id);
        }
    });
    Data.tableData.forEach((el, index) => {
        const item = {
            id: getSkuId(el),
            skuPrice: floatMultiply(el.skuPrice, 100),
            skuStock: el.skuStock,
            skuImg: el.imgUrl || '',
            erpSkuId: el.erpSkuId || '',
            skuSort: index + 1,
            skuExt: []
        };
        if (baseForm.specType === 1) {
            item.skuPrice = floatMultiply(SkuFormRef.value.formData.skuPrice, 100);
            item.skuStock = SkuFormRef.value.formData.skuStock;
            item.erpSkuId = SkuFormRef.value.formData.erpSkuId || '';
        }
        skuInfo.push(item);
        el.skuValueList.map(i => {
            skuInfo[index].skuExt.push({
                skuAttrId: i.skuAttrId,
                goodsId: goodsId,
                specAttrKeyId: i.keyId ? i.keyId : getSpecificationId(i.key) || 0,
                specAttrKeyName: i.key,
                specAttrValueId: i.valueId,
                skuAttrSort: i.skuAttrSort,
                specAttr: {
                    specAttrKeyName: i.key,
                    attributeImg: '',
                    attributeValue: i.value
                }
            });
        });
    });
    // specAttrValueDeletedIds
    Data.skuInfoTable.map(el => {
        let index = skuInfo.findIndex(i => i.id == el.id);
        if (index <= -1) {
            skuDeletedIds.push(el.id);
        } else {
            el.skuExt.map((i, idx) => {
                let jdx = skuInfo[index].skuExt.findIndex(
                    j => j.specAttr.specAttrKeyName == el.skuExt[idx].specAttr.specAttrKeyName
                );
                if (jdx > -1) {
                    skuInfo[index].skuExt[jdx].skuAttrId = el.skuExt[idx].skuAttrId;
                }
            });
        }
    });
    let allSpaceList = initSkuInfo(Data.skuInfoTable);
    allSpaceList.map((el, index) => {
        Data.skuFormList.map(i => {
            if (i.skuName == el.skuName) {
                el.list.map(j => {
                    let jdx = i.list.findIndex(k => k.specAttrValueId == j.specAttrValueId);
                    if (jdx < 0) {
                        specAttrValueDeletedIds.push(j.specAttrValueId);
                    }
                });
            }
        });
    });
    let params = {
        erpSpuId: BasicInfoRef.value.formData.erpSpuId || '',
        goodsId: baseForm.id,
        specType: baseForm.specType,
        shopId: Data.shopId,
        materialSrc: materialSrc,
        goodsName: BasicInfoRef.value.formData.goodsName,
        classId: BasicInfoRef.value.formData.classId,
        goodsCategoryId: goodsCategoryId,
        enable: '1',
        transportId: FreightFormRef.value.formData.transportId,
        goodsDescription: baseForm.desc,
        isShow: OtherFormRef.value.formData.isShow,
        onSale: type,
        skuInfo: skuInfo,
        categoryDeletedId: categoryDeletedId,
        materialSrcDeletedId: materialSrcDeletedId,
        specAttrValueDeletedIds: specAttrValueDeletedIds,
        skuDeletedIds: skuDeletedIds
    };
    request('updateGoodsDetailServ', params).then(res => {
        ElMessage.success('修改成功');
        router.back();
    });
    return params;
};

const saveGoods = throttle(type => {
    if (baseForm.desc.length > 8000) {
        ElMessage.error('商品描述最长长度为8000');
        return;
    }
    if (Data.type == 'edit') {
        editSaveGood(type);
    } else {
        // type:1-上架，2-下架
        let params = addSaveGood(type);
        request('addGoodsDetailServ', params).then(res => {
            ElMessage.success('保存成功');
            router.back();
        });
    }
});

const getSpecificationId = name => {
    let obj = Data.specificationList.find(el => el.attributeName == name) || {};
    return obj.id;
};
// const getSpecificationName = attrName => {
//     let obj = Data.specificationList.find(el => el.attrName == attrName) || {};
//     return obj.attributeName;
// };

const getSpecValueList = attributeName => {
    const obj = Data.specificationList.find(el => el.attributeName == attributeName) || {};
    const allAttr = obj.attr || [];
    const currentSku = Data.skuFormList.find(x => x.skuName === attributeName) || {};
    const selectedArr = Array.from(currentSku.list, x => x.skuValue) || [];
    return allAttr.filter(x => !selectedArr.includes(x.attrName)) || [];
};

const getTableData = (ary = []) => {
    const arr = [];
    ary.forEach((el, index) => {
        if (el.list && el.list.length) {
            el.list.forEach((i, idx) => {
                if (i.list && i.list.length) {
                    i.list.forEach((j, jdx) => {
                        arr.push({
                            skuValue0: el.skuValue,
                            skuValue1: i.skuValue,
                            skuValue2: j.skuValue,
                            skuValueList: [
                                {
                                    skuAttrSort: el.skuAttrSort,
                                    keyId: el.attributeId,
                                    key: el.attributeName,
                                    valueId: el.specAttrValueId,
                                    value: el.skuValue,
                                    skuAttrId: el.skuAttrId
                                },
                                {
                                    skuAttrSort: i.skuAttrSort,
                                    keyId: i.attributeId,
                                    key: i.attributeName,
                                    valueId: i.specAttrValueId,
                                    value: i.skuValue,
                                    skuAttrId: i.skuAttrId
                                },
                                {
                                    skuAttrSort: j.skuAttrSort,
                                    keyId: j.attributeId,
                                    key: j.attributeName,
                                    valueId: j.specAttrValueId,
                                    value: j.skuValue,
                                    skuAttrId: j.skuAttrId
                                }
                            ]
                        });
                    });
                } else {
                    arr.push({
                        skuValue0: el.skuValue,
                        skuValue1: i.skuValue,
                        skuValueList: [
                            {
                                skuAttrSort: el.skuAttrSort,
                                keyId: el.attributeId,
                                key: el.attributeName,
                                valueId: el.specAttrValueId,
                                value: el.skuValue,
                                skuAttrId: el.skuAttrId
                            },
                            {
                                skuAttrSort: i.skuAttrSort,
                                keyId: i.attributeId,
                                key: i.attributeName,
                                valueId: i.specAttrValueId,
                                value: i.skuValue,
                                skuAttrId: i.skuAttrId
                            }
                        ]
                    });
                }
            });
        } else {
            arr.push({
                skuValue0: el.skuValue,
                skuValueList: [
                    {
                        skuAttrSort: el.skuAttrSort,
                        keyId: el.attributeId,
                        key: el.attributeName || el.skuName,
                        valueId: el.specAttrValueId,
                        value: el.skuValue,
                        skuAttrId: el.skuAttrId
                    }
                ]
            });
        }
    });
    return arr;
};

const getSkuId = val => {
    let ary = [];
    val.skuValueList.map(el => {
        ary.push(el.valueId);
    });
    ary.sort((a, b) => a - b);
    let aryStr = ary.join(',');
    let skuAry = [];
    Data.skuInfoTable.map((el, index) => {
        skuAry.push({
            id: el.id,
            str: ''
        });
        let arr = [];
        el.skuExt.map(i => {
            arr.push(i.specAttrValueId);
        });
        arr.sort((a, b) => a - b);
        let arrStr = arr.join(',');
        skuAry[index].str = arrStr;
    });
    let info = skuAry.find(el => el.str == aryStr) || {};
    return info.id;
};

const beforeImgUpload = rawFile => {
    let imgType = ['image/jpeg', 'image/png', 'image/jpg'];
    if (!imgType.includes(rawFile.type)) {
        ElMessage.error('上传图片只能是jpg、png、jpeg格式');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error('上传图片只能10M内');
        return false;
    }
    return true;
};

const uploadImgSuccess = (response, uploadFile) => {
    let index = baseForm.imgList.findIndex(el => !el.imgUrl);
    if (index >= 0) {
        baseForm.imgList[index].imgUrl = uploadFile.response.data.url;
    }
};

const uploadSKUImgSuccess = (index, idx, response, uploadFile) => {
    Data.skuFormList[index].list[idx].imgUrl = uploadFile.response.data.url;
    saveImgInfo(Data.skuFormList[index].list[idx].skuValue, uploadFile.response.data.url);
};

const delSkuImg = async (index, idx) => {
    if (await confirm(`确定要删除该图片吗？`)) {
        Data.skuFormList[index].list[idx].imgUrl = '';
        ElMessage.success('操作成功！');
        saveImgInfo(Data.skuFormList[index].list[idx].skuValue);
    }
};

const onUploadImg = async (files, callback) => {
    const res = await Promise.all(
        Array.from(files).map(file => {
            return new Promise((rev, rej) => {
                const formData = new FormData();
                formData.append('file', file);
                request('fileUploadServ', formData)
                    .then(res => rev(res))
                    .catch(error => rej(error));
            });
        })
    );
    callback(res.map(item => item.data));
};

// 项目规格拖拽排序
const dragoverSku = e => {
    e.preventDefault();
};
const dragstartSku = (index, value) => {
    Data.skuSortOldIndex = index;
};
const dragenterSku = (index, e) => {
    // if (Data.type == 'edit') return;
    Data.skuSortIndex = index;
    e.preventDefault();
};

const dragendSku = () => {
    let newList = [...Data.skuSortList];
    let oldInfo = newList[Data.skuSortOldIndex];
    newList.splice(Data.skuSortOldIndex, 1);
    newList.splice(Data.skuSortIndex, 0, oldInfo);
    Data.skuSortList = [...newList];
};

// 批量设置
const clickBatch = () => {
    // Data.tableData.map(el => {
    //     if (isNotEmpty(baseForm.skuStock)) {
    //         el.skuStock = baseForm.skuStock;
    //         skuTableRuleRef.value?.validate();
    //     }
    //     if (baseForm.skuPrice && isNotEmpty(baseForm.skuPrice)) {
    //         el.skuPrice = baseForm.skuPrice;
    //         skuTableRuleRef.value?.validate();
    //     }
    // });
    const skuPrice = baseForm.skuPrice;
    const notPriceEmpty = skuPrice && isNotEmpty(skuPrice);
    const skuStock = baseForm.skuStock;
    const notStockEmpty = isNotEmpty(skuStock);
    Data.tableData.forEach(el => {
        ['skuStock', 'skuPrice'].forEach(key => {
            const val = key === 'skuPrice' ? skuPrice : skuStock;
            const notEmpty = key === 'skuPrice' ? notPriceEmpty : notStockEmpty;
            if (notEmpty) {
                el[key] = val;
                return;
            }
        });
    });
    nextTick(() => {
        skuTableRuleRef.value?.validate();
    });
};

// 项目规则选中disable处理
const filterDisabled = (label, skuLabelList) => {
    return skuLabelList.some(el => {
        if (el.skuName == label) {
            return true;
        } else {
            return false;
        }
    });
};

// 获取商品详情
const getGoodsDetail = async () => {
    let params = { goodsId: baseForm.id };
    let res = null;
    try {
        const result = await request('queryGoodsDetailServ', params);
        res = result;
    } catch (error) {
        res = error;
    }
    Data.loading = false;
    if (res.code != 0) {
        ElMessage.error(res.msg);
        return;
    }
    await nextTick();
    let info = res.data || {};
    baseForm.goodsNo = info.goodsNo;
    baseForm.goodsName = info.goodsName;
    baseForm.specType = info.specType;
    // 商品分组
    const category = [];
    const categoryCacheData = [];
    if (Array.isArray(info.goodsCategoryId)) {
        info.goodsCategoryId.forEach(el => {
            category.push(el.categorySonId);
            categoryCacheData.push({
                parentId: el.categoryParentId,
                id: el.categorySonId,
                categoryName: el.category?.categoryName
            });
        });
    }
    const materialSrc = echoGoodsPicListHandle(info.materialSrc);
    BasicInfoRef.value.echoHandle({
        id: baseForm.id,
        goodsNo: info.goodsNo,
        goodsName: info.goodsName,
        classId: info.classId || '',
        classCacheData: [info.class || {}],
        category,
        categoryCacheData,
        materialSrc,
        erpSpuId: info.erpSpuId
    });

    SkuFormRef.value.echoHandle({
        isErp: info.isErp,
        erpSkuId: info.skuInfo[0]?.erpSkuId,
        skuPrice: floatDivide(info.skuInfo[0]?.skuPrice, 100),
        skuStock: info.skuInfo[0]?.skuStock
    });
    FreightFormRef.value.echoHandle({
        transportId: info.transportId
    });
    baseForm.desc = info.goodsDescription;
    OtherFormRef.value.formData.isShow = info.isShow;
    Data.detailMaterialSrc = info.materialSrc;
    Data.detailCategoryList = info.goodsCategoryId;
    Data.onSale = info.soldOut;
    Data.skuInfoTable = info.skuInfo || [];
    let arr = initSkuInfo(info.skuInfo);
    Data.skuFormList = arr;
    saveSkuInfo();
};

const toList = async () => {
    if (await confirm(`请确认是否需要返回`)) {
        router.back();
    }
};

onMounted(() => {
    setLayout();
    if (baseForm.id) {
        getGoodsDetail();
    } else {
        Data.skuFormList[0].skuName = '';
        Data.skuFormList[0].list[0].skuValue = '';
    }
});
onUnmounted(() => {
    resetLayout();
});
</script>
<style lang="scss" src="./style.scss" scoped></style>
